import "../sass/cart.scss"

const cart_empty = document.querySelector('.cart_empty')

const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
const GoBuy = document.querySelector('.cart_empty > button')

const cart_info = document.querySelector('.cart_info')
const cart_top = document.querySelector('.cart_top')
const cart_main = document.querySelector('.cart_main')
const cart_bottom = document.querySelector('.cart_bottom')
const xuanran = document.querySelector('.xuanran')

!id ? window.location.href = 'login.html' : getCartList()


/**************** 请求购物车商品 ****************/
async function getCartList() {

    await $.ajax({
        url: 'http://localhost:8888/cart/list?id=' + id,
        headers: { authorization: token },
    }).then(res => {
        
            if (res.code === 401) {
                window.location.href = './login.html'
                return
            }
            console.log(res)
            //  渲染页面
            bindHtml(res)
        
    })
}
/************* 请求购物车商品结束 *************/

/************* 渲染请求购物车 *************/
function bindHtml(res) {
    // 如果购物车没东西, 显示大图片,点击去购物 直接跳转回 主页  
    if (!res.cart.length) { 
        cart_main.classList.remove('active') // 有的时候显示的
        cart_empty.classList.add('active')  //没东西的时候显示的盒子
       
        GoBuy.onclick = () => {
            window.location.href = 'index.html'
        }
        return
    }

    // 从拿到的 res 中只有选中的 is_select === true 的, 计算总件数, 计算总价格
    let totalNu = 0, totalPrice = 0, totalSelect = 0

    res.cart.forEach(item => {
        if (item.is_select) {
            totalNu += item.cart_number
            totalPrice += item.cart_number * item.current_price
            totalSelect++
        }
    })


    // 用 res.cart 进行页面渲染
    // res 中所有选中 is_select 是 res.cart 的长度吗? 是的话选中
    let str = `
    <div class="cart_top">
       <p>
          <p>全选:</p>
          <input type="checkbox" ${ totalSelect === res.cart.length ? 'checked' : '' } class="quanxuan"> 
       </p>
     </div>
  <main>
         <ul class="cart_main active">
    `

   // 根据 res.cart 遍历生成 li, 渲染中部
    res.cart.forEach(item => {
      str += `
      <li>
      <ol>
            <li class="cart_xuanzhong">
                  <input data-id="${ item.goods_id }" type="checkbox" ${ item.is_select ? 'checked' : '' } class="dangexuanzhong">
            </li>
            <li class="goods_img ">
                 <img src="${ item.img_small_logo }"></img>
            </li>
            <li class="goods_info">
                  <p>${ item.title }</p>
            </li>
            <li class="goods_price">
                  <p>￥${ item.current_price }</p>
            </li>
            <li class="goods_number">
                  <button data-num="${ item.cart_number }" data-id="${ item.goods_id }" data-max="${ item.goods_number }" class="add">+</button>
                  <input type="text" class="Num" value="${ item.cart_number }">
                  <button data-id="${ item.goods_id }" data-num="${ item.cart_number }" class="sub">-</button>
            </li>
            <li class="goods_total">
                  <input type="text" value="￥${ (item.current_price * item.cart_number).toFixed(2) }">
            </li>
            <li class="goods_del">
                  <button data-id="${ item.goods_id }" class="goods_del_btn">删 除</button>
            </li>

      </ol>

</li>
      `
    })

    str +=`
    </ul>
         <div class="cart_empty">
             <button>去 购 物</button>
         </div>

    </main>
        <div class="cart_bottom">
    `

    str += `
    <p class="totalNum">
        总计 : ${ totalNu } 件商品
    </p>
      <div class="btns">
            <button class="clear">清空购物车</button>
            <button class="delAll" ${ totalSelect === 0 ? ' disable' : '' }">删除所有已选中</button>
            <button class="pay" ${ totalSelect === 0 ? ' disable' : '' }">去支付</button>
      </div>
      <p class="totalPrice">
             总计 : ￥ ${ totalPrice.toFixed(2) }
      </p>
      </div>
    `

    // // 插入到页面内部
    xuanran.innerHTML = str
    cart_main.classList.add('active')
    cart_empty.classList.remove('active')
}
/************* 渲染请求购物车结束 *************/

/************* 点击事件 *************/
xuanran.addEventListener('click', e => {


    // 判断点击的是每一条信息的 复选框
    if (e.target.className === 'dangexuanzhong') {
      // 需要拿到一个商品 id
      const goodsId = e.target.dataset.id
  
      // 发送请求
      $.ajax({
        url: 'http://localhost:8888/cart/select',
        method: 'POST',
        data: { id, goodsId },
        headers: { authorization: token },
        success(res){
           // 重新请求商品列表
           if (res.code === 1) getCartList()
        }
      })
    }
  
    // 判断点击的是删除每一条信息的 按钮
    if (e.target.className === 'goods_del_btn') {
      // 拿到商品 id
      const goodsId = e.target.dataset.id
  
      // 发送请求
       $.ajax({
        url: 'http://localhost:8888/cart/remove',
        data: { id, goodsId },
        headers: { authorization: token },
        success(res){
        // 请求列表数据
          if (res.code === 1) getCartList()
        }
      })  
    }
  
    // 判断点击的是每一条商品数量 +
    if (e.target.className === 'add') {
      // 商品 id
      const goodsId = e.target.dataset.id
      // 目前的购买数量, +1
      const num = e.target.dataset.num - 0
      // 库存的数量
      const maxNum = e.target.dataset.max - 0
  
      // 如果目前就是最大库存, 那么不能加了
      if (num >= maxNum) return alert('库存已经不够了')
  
      // 发送请求
      $.ajax({
        url: 'http://localhost:8888/cart/number',
        method: 'POST',
        data: { id, goodsId, number: num + 1 },
        headers: { authorization: token },
        success(res){
         //从新渲染页面
         if (res.code === 1) getCartList()
        }
      })
}
  
    // 0点击的是每一条 -
    if (e.target.className === 'sub') {
      // 商品 id
      const goodsId = e.target.dataset.id
      // 目前的购买数量
      const num = e.target.dataset.num - 0
  
      // 判断, 如果当前 num <= 1, 不能少了
      if (num <= 1) return alert('商品数量不能 < 0')
  
      // 发送请求
        $.ajax({
        url: 'http://localhost:8888/cart/number',
        method: 'POST',
        data: { id, goodsId, number: num - 1 },
        headers: { authorization: token },
        success(res){
           // 从新请求列表数据
          if (res.code === 1) getCartList()
        }
      })
  
     
    }
  
    // 0点击的是全选按钮
    if (e.target.className === 'quanxuan') {
      // 拿到的是自己的选中状态
      const type = e.target.checked ? 1 : 0
  
      // 发送请求
      $.ajax({
        url: 'http://localhost:8888/cart/select/all',
        method: 'POST',
        data: { id, type },
        headers: { authorization: token },
        success(res){
        // 从新请求列表数据
          if (res.code === 1) getCartList()
        }
      })
  
     
    }
  
    // 判断点击的是删除所有已选中
    if (e.target.className === 'delAll') {
      // 发送请求
      $.ajax({
        url: 'http://localhost:8888/cart/remove/select',
        data: { id },
        dataType: 'json',
        headers: { authorization: token },
        success(res){
          // 从新请求列表数据
          if (res.code === 1)  getCartList()
        }
      })
  
     
    }
  
    //判断点击清空购物车
    if (e.target.className === 'clear') {
      // 发送请求
     $.ajax({
        url: 'http://localhost:8888/cart/clear',
        data: { id },
        headers: { authorization: token },
        success(res){
         // 请求列表数据
          if (res.code === 1)  getCartList()
        }
      })
  
     
    }
  
    // 判断点击的是支付按钮
    if (e.target.className === 'pay') {
      // 发送请求
      $.ajax({
        url: 'http://localhost:8888/cart/pay',
        method: 'POST',
        data: { id },
        headers: { authorization: token },
        success(res){
             console.log(res)
        }
      })
    }
})
/************* 点击事件结束 *************/


/************* 请求用户信息 *************/
function getUsersInfo(){
  const UsersInfo = $.ajax({
      url: 'http://localhost:8888/users/info?id=' + id,
      headers: { authorization: 'token' },
      success(res) {
        console.log(res)
        cart_info.innerText = res.info.nickname
      }
  })
}
getUsersInfo()
  